<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button>1</button>
    <button>1</button>
    <button>1</button>

    <script>

        // 伪数组：类似于数组的存在   --- 类数组
        //    长度length
        //    可以使用下标去访问
        //    但是不能完全拥有数组的方法

        // arguments

        // 对页面元素实现的是深复制  querySelectorAll   NodeList     有forEach方法
        // 对页面元素实现的是浅复制  getElementsByTagName  HTMLCollection     没有forEach

        // classList  


        // es6中提供了伪数组转真数组的方法
        //   Array.from()   



        // 伪数组转真数组的方法
        //    遍历  push
        //    ...
        //    Array.from()




        function fn() {
            console.log(arguments);
            // arguments.forEach(function(item){
            //     console.log(item);
            // })
            // const arr = [] ;
            // for(let i = 0 ; i < arguments.length ; i++) {
            //     arr.push(arguments[i])
            // }

            // const arr = [...arguments];
            const arr = Array.from(arguments);
            console.log(arr);
        }

        fn(1,3,5,7);


        // const oBtns = document.querySelectorAll('button') ;
        // console.log(oBtns);   // NodeList

        // const oBtnsArr = [...oBtns] ;
        // console.log(oBtnsArr);

        const oBtns = document.getElementsByTagName('button') ;
        console.log(oBtns);   // HTMLCollection  html集合  --- 伪数组

        setTimeout(function(){
            const oBtn = document.createElement('button') ;
            document.body.appendChild(oBtn);
            console.log(oBtns);
        },1000)


    </script>
    
</body>
</html>


<!-- 
对象 
    String 
    Array 
    Date 
    RegExp
    Arguments 
    NodeList  -->